<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>border</title>
</head>
<style>
    .box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 500px;
        height: 300px;
        border: 50px #000 solid;
        border-image: url(./1.png) 50 stretch;
        /* border-image: url(./1.png) 50 round; */
    }

    /**
    * 方案一    使用旋转
    */
    .overlap {
        color: #fff;
        font-family: STLiti;
        font-size: 100px;
        letter-spacing: -5px;
        display: flex;
        transform-style: preserve-3d;
    }

    /* .overlap span {
        text-shadow: 10px 0 10px #000;
        transform: perspective(500px) rotateY(-1deg);
    } */

    /**
    * 方案二 使用 z-index
    */
    .overlap span {
        text-shadow: 10px 0 10px #000;
        position: relative;
        /* z-index: var(--i); */
    }

    /**------------------------------------------------------------------------------------------------------------------------------------*/
    h1 {
        font-size: 60px;
        font-weight: bold;
        color: #35333c;
    }

    .shark-txt {
        -webkit-text-fill-color: transparent;
        background: linear-gradient(45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 60%) -100%/50% no-repeat currentColor;
        -webkit-background-clip: text;
        animation: shark-txt 5s infinite;
    }

    @keyframes shark-txt {
        form {
            background-position: -100%;
        }

        to {
            background-position: 50%;
        }
    }
</style>

<body>
    <div class="box">
        我本将心向明月，奈何明月照沟渠
    </div>

    <!-- <div class="overlap">我本将心向明月，奈何明月照沟渠</div> -->
    <div class="overlap">HELLO WORLD</div>

    <h1 class="shark-txt">莫愁前路無知己、天下誰人不識君</h1>
</body>
<script>
    const overlap = document.querySelector('.overlap')
    overlap.innerHTML = overlap.textContent.split('').map((item, i, arr) =>
        `<span style="--i:${arr.length - i}}">${item}</span>`
    ).join('')
</script>

</html>